<template>
	<view class="finance">
		<view class="income">
			<view class="item1">
				<view class="left">总收入</view>
				<view v-if="!is_examine" class="right" @click="navigateTo('/pages/my/txSetUp')">
					<text>提现设置</text>
					<image src="https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/profitTool/icon16.png"
						mode="scaleToFill"></image>
				</view>
			</view>
			<view class="item2">
				￥<text>{{userInfo.total_income}}</text>
			</view>
			<view v-if="!is_examine" class="item3">
				<view class="left">可提现余额{{userInfo.money}}元</view>
				<view class="right" @click="navigateTo('/pages/my/cashOut')">去提现</view>
			</view>
		</view>

		<view class="list">
			<view class="title-nav">
				<view :class="['nav', type == 1?'xz':'']" @click="cut(1)">
					广告收益
					<text></text>
				</view>
				<view :class="['nav', type == 2?'xz':'']" @click="cut(2)">
					邀请收益
					<text></text>
				</view>
				<!-- <view :class="['nav', type == 3?'xz':'']" @click="cut(3)">
					活动收益
					<text></text>
				</view> -->
			</view>
			<view v-if="type == 1">
				<view class="item" v-for="(v,i) in AdRewardList" :key="i">
					<view class="key">{{v.work.title}}</view>
					<view class="val">+{{v.total_ad_money}}</view>
				</view>
			</view>
			<view v-if="type == 2">
				<view class="item" v-for="(v,i) in teamList" :key="i">
					<view class="key">{{v.nickname}}</view>
					<view class="val">+{{v.total_referee_money}}</view>
				</view>
			</view>
			<view v-if="type == 3">
				<view class="item" v-for="(v,i) in teamList" :key="i">
					<view class="key">{{v.nickname}}</view>
					<view class="val">+{{v.total_referee_money}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: 1,
				page: 1,
				AdRewardList: [],
				teamList: [],
				total: 0,
				userInfo: uni.getStorageSync("user"),
				is_examine: 1
			}
		},
		onShow() {
			this.getConfig()
			if (uni.getStorageSync('token')) {
				this.getUserInfo()
			}
		},
		onLoad() {
			this.myAdReward()
		},
		methods: {
			cut(type) {
				this.type = type
				this.AdRewardList = []
				this.teamList = []
				this.total = 0
				if (type == 1) {
					this.myAdReward()
				} else if (type == 2) {
					this.myTeam()
				} else if (type == 3) {
					
				}
			},
			async getUserInfo() {
				let res = await this.$http("api/user/getUserInfo", {}, "GET")
				// console.log(res);
				if (res.code == 200) {
					uni.setStorageSync("user", res.result);
					this.userInfo = res.result
				}
			},
			//广告收益
			async myAdReward() {
				let res = await this.$http("api/user/myAdReward", {
					page: this.page,
					size: 20,
				}, "GET")
				// console.log(res);
				if (res.code == 200) {
					this.AdRewardList = this.AdRewardList.concat(res.result.data)
					this.total = res.result.total
				}
			},
			//邀请记录
			async myTeam() {
				let res = await this.$http("api/user/myTeamReward", {
					page: this.page,
					size: 20,
				}, "GET")
				// console.log(res);
				if (res.code == 200) {
					this.teamList = this.teamList.concat(res.result.data)
					this.total = res.result.total
				}
			},
			// 获取系统配置
			async getConfig() {
				let res = await this.$http("api/common/getConfig")
				// console.log(res);
				if (res.code == 200) {
					if (getApp().globalData.platform == "mp-weixin" && res.result.is_examine == 1) {
						this.is_examine = 1
					} else {
						this.is_examine = 0
					}
					uni.setStorageSync("is_examine", this.is_examine)
				}
			}
		},
		onReachBottom() {
			if (this.type == 1) {
				if (this.AdRewardList.length >= this.total) return
				this.page += 1
				this.myAdReward()
			} else if (this.type == 2) {
				if (this.teamList.length >= this.total) return
				this.page += 1
				this.myTeam()
			} else if (this.type == 3) {
				if (this.teamList.length >= this.total) return
				this.page += 1
				this.myTeam()
			}
		}
	}
</script>

<style scoped lang="scss">
	.finance {
		padding: 32rpx;

		.income {
			height: 276rpx;
			background: url("https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/profitTool/financeBack.png") no-repeat;
			background-size: 100% 100%;
			padding: 24rpx;
			box-sizing: border-box;

			.item1 {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.left {
					font-weight: 800;
					font-size: 32rpx;
					color: #FFFFFF;
				}

				.right {
					display: flex;
					align-items: center;

					text {
						font-weight: 500;
						font-size: 20rpx;
						color: #FFFFFF;
						padding-right: 4rpx;
					}

					image {
						width: 24rpx;
						height: 24rpx;
					}
				}
			}

			.item2 {
				font-weight: bold;
				font-size: 36rpx;
				color: #FFFFFF;
				padding: 16rpx 0 40rpx 0;

				text {
					font-size: 48rpx;
				}
			}

			.item3 {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.left {
					font-weight: 500;
					font-size: 24rpx;
					color: #FFFFFF;
				}

				.right {
					width: 124rpx;
					height: 52rpx;
					background: #FFFFFF;
					border-radius: 28rpx 28rpx 28rpx 28rpx;
					line-height: 52rpx;
					text-align: center;
					font-weight: bold;
					font-size: 20rpx;
					color: #FF504A;
				}
			}
		}

		.list {
			.title-nav {
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 32rpx 0 64rpx 0;

				.nav {
					font-weight: 500;
					font-size: 32rpx;
					color: #8D8F90;
					padding: 0 50rpx;
				}

				.xz {
					position: relative;
					font-weight: 800;
					font-size: 32rpx;
					color: #FF504A;

					text {
						position: absolute;
						left: calc(50% - 18rpx);
						bottom: -24rpx;
						width: 36rpx;
						height: 8rpx;
						background: #FF504A;
						border-radius: 4rpx 4rpx 4rpx 4rpx;
					}
				}
			}

			.item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-bottom: 52rpx;

				.key {
					font-weight: bold;
					font-size: 24rpx;
					color: #333333;
				}

				.val {
					font-weight: bold;
					font-size: 24rpx;
					color: #FF504A;
				}
			}
		}
	}
</style>